<template>
  <div class="address">
    <div class="icon_cancel" @click="closeBox"></div>
    <div class="address_title">{{$t("addCard.add")}}</div>
    <div class="address_1">
      <div class="_1_n">{{$t("addCard.addNum")}}</div>
      <div class="_1_M">
        <input type="number" class="_1_M_n" v-model="size"/>
        <div class="_1_M_Max" @click="max">MAX</div>
      </div>
    </div>
    <div class="address_2">
      <div>{{$t("addCard.cost")}}</div>
      <div>{{slotData.cost}} KOS</div>
    </div>
    <button class="union_join" @click="open">{{$t("addCard.buy")}}</button>
    <div class="address_3">KOS：{{balance}}</div>
  </div>
</template>

<script>
    import http from "../../../../http";
    export default {
      data(){
        return {
          slotData: {},
          size: 1,
          balance: '-'
        }
      },
      methods: {
        closeBox : function ()  {
          this.$store.commit('changeOverlay', false)
        },
        max: function(){
          this.size = this.slotData.remain;
        },
        async getWallet() {
          let res = await http.get(`/api/wallet/get?id=2`);
          if (res.code === 200) {
            this.balance = res.data;
          }
        },
        async getSlotData() {
          let res = await http.get(`/api/user-card-slot/slotData`);
          if (res.code === 200) {
            this.slotData = res.data;
          }
        },
        open: async function(){
          let res = await http.post(`/api/user-card-slot/openSlot?size=` + this.size);
          if (res.code === 200) {
            Toast(this.$t("operationSuccess"));
            this.closeBox();
            this.$router.replace("/TruckMining?t=" + new Date().getTime())
          }
        }
      },
      mounted() {
        console.log("mounted");
        this.getWallet();
        this.getSlotData();
      },
    }
</script>

<style scoped lang="scss">
.address {
  width: 301px;
  height: 295px;
  background-color: #100d0d;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  padding: 20px 15px 0;
}
.address_title {
  font-size: 20px;
  color: $color;
  @include fontSCMedium;
}
.union_join {
  width: 100%;
  height: 44px;
  background: #d8bc84;
  border-radius: 5px;
  font-size: 17px;
  @include fontSCRegular;
  font-weight: 400;
  color: #0b0b09;
  line-height: 44px;
  margin-top: 30px;
}
.icon_cancel {
  width: 14px;
  height: 14px;
  background: url("@/assets/rechargemoney/icon_cancel.png") no-repeat center;
  background-size: cover;
  position: absolute;
  top: 27px;
  right: 15px;
}
.address_1 {
  @include flex;
  margin-top: 29px;
  ._1_n {
    width: 86px;
    height: 20px;
    font-size: 14px;
    @include fontTCMedium;
    font-weight: 500;
    color: $color1;
    line-height: 20px;
    text-align: left;
  }
  ._1_M {
    display: flex;
    align-items: center;

    border-radius: 2px;

    margin-left: 19px;
    ._1_M_n {
      width: 88px;
      height: 35px;
      padding-left: 12px;
      padding-top: 5px;
      padding-bottom: 5px;
      text-align: left;
      font-size: 18px;
      @include fontTCMedium;
      font-weight: 500;
      color: $color1;
      line-height: 25px;
      background-color: transparent;
      border: 1px solid $color;
      border-right: none;
      border-radius: 0;
    }
    ._1_M_Max {
      width: 68px;
      height: 35px;
      background-color: $color;
      font-size: 14px;
      @include fontTCMedium;
      font-weight: 500;
      color: #0b0b09;
      line-height: 35px;
    }
  }
}
.address_2 {
  @include flex;
  margin-top: 30px;
  > div {
    &:nth-child(1) {
      font-size: 14px;
      @include fontTCMedium;
      font-weight: 500;
      color: $color1;
      line-height: 20px;
    }
    &:nth-child(2) {
      font-size: 14px;
      @include fontTCMedium;
      font-weight: 500;
      color: $color;
      line-height: 20px;
    }
  }
}
.address_3 {
  font-size: 13px;
  @include fontTCMedium;
  font-weight: 500;
  color: $color;
  margin-top: 15px;
}
</style>
